<html lang="en">
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title> Log Viewer </title>
      <link rel="stylesheet" href="/styles.css">

      <style>
      .collapsible {
          background-color: #777;
          color: white;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
      }

      .active, .collapsible:hover {
          background-color: #555;
      }

      .colapsablecontent {
          padding: 0 18px;
          display: none;
          overflow: hidden;
          background-color: #f1f1f1;
      }
      </style>
    </head>

    <body>
      <h1> Log Viewer </h1>
      <div class="widget">
      <div class="widget-header">
        <h5>Log Viewer</h5>
      </div>
      <div class="widget-content">

        <h3> <bold> WARNING </bold> </h3>
        <p>
          Be cautious when sharing this log dump. It will contain potentially
          sensitive information about your bot.
        </p>
        <p> <a href="/logs">Download all logs</a> </p>

        <%= for log <- logs do %>
          <button class="collapsible"> <%= String.slice(log.message, 0..30) %> </button>
          <div class="colapsablecontent">
            <%= log.message %>
          </div>
        <%= end %>
      </div>

      <script>
      var coll = document.getElementsByClassName("collapsible");
      var i;

      for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var content = this.nextElementSibling;
              if (content.style.display === "block") {
                  content.style.display = "none";
              } else {
                  content.style.display = "block";
              }
          });
      }
      </script>
    </body>
</html>
